<!-- 动态发布 -->
<template>
	<view class="release-dynamic">
		<van-nav-bar title="" left-text="" left-arrow @click-left="leftFn()">
			<template #right>
				<van-button type="primary" :disabled="isDisabled" @click="SendTrendBtn()">发布</van-button>
			</template>
		</van-nav-bar>
		<view class="release-dynamic-main">
			<uni-easyinput class="release-dynamic-main-text" type="textarea" v-model="formData.text"
				placeholder="记录点滴生活" />
		</view>
		<view class="release-img-list">

		</view>
		<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
			<view class="release-topic-list-box">
				<!-- 已上传的文件 -->
				<template v-if="imgArr.length != 0">
					<template v-if="imgArr[0].type=='video'">
						<view class="video-box">
							<video :src="imgArr[0].Path" controls></video>
							<img class="close-btn" src="@/assets/image/icon48.png" @click="imgCloseFn(0)">
						</view>
					</template>
					<template v-else>
						<view class="release-topic-list-img-item" v-for="(item, index) in imgArr" :key="item.id">
							<ImgBox @imgClose="imgCloseFn(index)" :imgItem="item.Path" />
						</view>
					</template>
				</template>
			</view>
		</scroll-view>
		<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
			<view class="release-topic-list-box">
				<view class="release-topic-list-box-item" v-for="(item, index) in topic" :key="item.ID">
					<Topic @topicClose="topicClose(index)" :topicItem="item" />
				</view>
			</view>
		</scroll-view>
		<view class="release-dynamic-bottom">
			<view class="release-dynamic-bottom-topic"></view>
			<view class="release-dynamic-bottom-top">
				<view class="release-dynamic-bottom-top-left">
					<Address @on-close="closeAddress()" @update:addressValue="ev => addressValue = ev"
						class="address-box" />
					<Topic @topicCheck="topicCheck" />
				</view>
				<view class="release-dynamic-bottom-top-right">
					<NoComment @update:isNoComment="ev => state.CommentState = ev" />
				</view>
			</view>
			<view class="release-dynamic-bottom-bottom">
				<view class="release-dynamic-bottom-bottom-left">
					<UploadImg @checkImg="checkImg" :disabled="imgArr.length == 1 && imgArr[0].type=='video'" />
					<!-- 上传视频按钮 -->
					<image src="../../../assets/image/video.png" mode="heightFix"
						style="height: 62rpx; margin-left: 40rpx;" @click="chooseVideo" v-show="imgArr.length == 0">
					</image>
					<image src="../../../assets/image/video1.png" mode="heightFix"
						style="height: 62rpx; margin-left: 40rpx;" v-show="imgArr.length > 0"></image>
				</view>
				<view class="release-dynamic-bottom-bottom-right">
					<VisibleState @update:isDisplayState="ev => state.displayState = ev" />
				</view>
			</view>
		</view>
		<AuthPup ref="AuthPupRef" :types="2">
			<template #auth>
				<OpenMember :curIndex="state.curIndex" @TrendUnLockSuccess="TrendUnLockSuccess" />
			</template>
		</AuthPup>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		toRefs,
		getCurrentInstance,
		onMounted
	} from "vue"
	import Address from '@/components/address'
	import Topic from '@/components/topic'
	import NoComment from '@/components/noComment'
	import UploadImg from '@/components/uploadImg'
	import VisibleState from '@/components/visibleState'
	import ImgBox from '@/components/imgBox'
	import {
		watchEffect
	} from "vue"
	import {
		getAuthorization,
		setAuthorization
	} from "@/utils/auth.js"

	import {
		SendTrend,
	} from '@/api/person/index.js'

	let {
		proxy
	} = getCurrentInstance()

	const state = reactive({
		formData: {
			text: ""
		},
		topic: [],
		isOpened: 'none',
		CommentState: 0,
		displayState: 0,
		userInfo: {},
		curIndex: '7'
	})
	let {
		formData,
		topic
	} = toRefs(state)
	const leftFn = () => {
		uni.navigateTo({
			url: '/pages/home/index'
		})
	}

	// 删除地址
	const closeAddress = () => {

	}

	// 选中话题
	const topicCheck = (item) => {
		let arr = state.topic.map(o => o.ID)
		if (!arr.includes(item.ID)) {
			state.topic.push(item)
		}
	}

	// 删除选中话题
	const topicClose = (index) => {
		state.topic.splice(index, 1)
	}

	let imgArr = ref([])
	// 选中图片
	const checkImg = (item) => {
		imgArr.value = item.concat(imgArr.value)
	}

	let imgCloseFn = (index) => {
		imgArr.value.splice(index, 1)
	}

	let isDisabled = ref(true)
	watchEffect(() => {
		if (state.formData.text) {
			isDisabled.value = false
		} else {
			isDisabled.value = true
		}
	})
	let addressValue = ref({
		"locationText": state.userInfo.CityText,
		"longitude": state.userInfo.longitude,
		"latitude": state.userInfo.Latitude,
	})
	const SendTrendFn = async () => {
		let {
			locationText,
			longitude,
			latitude
		} = addressValue.value

		// 判断发布类型 2为发布视频
		let TrendType = 1;
		if (imgArr.value.length > 0 && imgArr.value[0].type == 'video') {
			TrendType = 2;
		}

		let params = {
			"locationText": locationText,
			"longitude": longitude,
			"latitude": latitude,
			"UserID": getAuthorization('userId'),
			"TrendType": TrendType,
			"fileIDs": imgArr.value.map(o => o.ID), // 文件id
			"displayState": state.displayState,
			"topicIDs": state.topic.map(o => o.ID), // 选中的标签
			"text": state.formData.text,
			"CommentState": state.CommentState
		}
		try {
			uni.showLoading({
				title: '发布中',
			})
			let data = await proxy.$post(SendTrend, params)
			setAuthorization("active", 4)
			uni.hideLoading()
			if (data.code == 200) {
				uni.showToast({
					title: '发布成功',
					icon: "none"
				})
				uni.navigateTo({
					url: '/pages/home/index?types=4'
				})
			}
		} catch (error) {
			uni.hideLoading()
			uni.showToast({
				title: error.message,
				icon: "none"
			})
		}

	}

	let AuthPupRef = ref()
	const TrendUnLockSuccess = () => {
		SendTrendFn()
		AuthPupRef.value.squareHideFn()
	}

	const SendTrendBtn = () => {
		if (state.userInfo.VipState == 0) {
			let sex = state.userInfo.Sex
			state.curIndex = sex == 0 ? '1' : '7'
			AuthPupRef.value.squareFn()
			return
		}
		SendTrendFn()
	}
	onMounted(() => {
		state.userInfo = JSON.parse(getAuthorization('userInfo'))
	})

	// 上传视频
	const chooseVideo = () => {
		uni.chooseVideo({
			success(res) {
				uni.showLoading({
					title: "上传中..."
				})
				// 上传文件
				let tokenObj = getAuthorization("token") ? JSON.parse(getAuthorization("token")) : ""
				let token = tokenObj.AccessToken
				uni.uploadFile({
					url: '/api/app/api/G/user-heibai/v1/Files', //仅为示例，非真实的接口地址
					filePath: res.tempFilePath,
					name: 'file',
					header: {
						"Authorization": "Bearer " + token
					},
					formData: {
						'groupCode': '99999999'
					},
					success: (uploadFileRes) => {
						let data = JSON.parse(uploadFileRes.data)
						if (data.code == 200) {
							imgArr.value = [{
								type: 'video',
								Path: res.tempFilePath,
								ID: data.data[0].ID
							}]
						}
					},
					fail: (error) => {
						uni.showToast({
							title: error.message
						})
					},
					complete: () => {
						uni.hideLoading()
					}
				});
			}
		})
	}
</script>

<style lang="scss" scoped>
	.release-dynamic {
		height: 100vh;
		position: relative;
	}

	.van-button {
		height: 44rpx;
		line-height: 44rpx;
		padding: 0 10rpx;
	}

	:deep(.uni-easyinput__content) {
		border: none;
		font-size: 30rpx;

		.uni-easyinput__content-textarea {
			min-height: 50vh;
		}
	}

	.release-dynamic-bottom-top {
		padding: 0 30rpx 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #ECECEC;

		.release-dynamic-bottom-top-left {
			display: flex;
		}
	}

	.address-box {
		margin-right: 20rpx;
	}

	.release-dynamic-bottom-bottom {
		padding: 16rpx 30rpx;
		display: flex;
		justify-content: space-between;


		.release-dynamic-bottom-bottom-left {
			display: flex;
			align-items: center;
		}
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.release-topic-list-box {
		display: flex;
		padding: 20rpx 60rpx 20rpx 30rpx;

		.release-topic-list-box-item {
			flex: none;
			margin-right: 15rpx;
		}
	}

	.release-topic-list-img-item {
		margin-right: 15rpx;
	}


	.video-box {
		position: relative;
		width: 200rpx;
		height: 200rpx;

		video {
			width: 100%;
			height: 100%;
		}

		.close-btn {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			top: 10rpx;
			right: 10rpx;
			z-index: 10;
		}
	}
</style>
